<template>
  <div class="funcComIndex">
    <el-card>
      <h1>函数单文件</h1>
      <p><a href="https://v2.cn.vuejs.org/v2/guide/render-function.html#函数式组件" target="_blank">函数式组件</a></p>
    </el-card>
    <el-card>
      <h1>可以获取的数据</h1>
      <FunGetData>
        <div>test</div>
      </FunGetData>
    </el-card>
    <el-card>
      <h1>ref</h1>
      <p>这个ref应该写在函数组件内部，函数组件自己是没有实例的，所以获取的ref都是函数组件里面带有实例的</p>
      <FunRef refs="FunRefs"></FunRef>
    </el-card>
    <el-card>
      <h1>递归</h1>
      <Recursion
        :count="1"
        :flood="3"
      ></Recursion>
    </el-card>
  </div>
</template>

<script lang="ts">
// @ts-nocheck
import FunGetData from './FunGetData'
import FunRef from './FunRef'
import Recursion from './Recursion'
export default {
  name: "FuncCom",
  components:{
    FunRef,
    FunGetData,
    Recursion,
  },
  data(){
    return {
      data: '6666'
    }
  },
  provide(){
    return {
      testData: this.data
    }
  },
  methods:{
  }
}
</script>

<style scoped lang="scss">
.funcComIndex{
  color: blue;
}
.FunGetData{
  color: red;
}
</style>
